/* 记录常用的css功能 */
/* 项目初始化css重置 */
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

/* 单行文本显示省略号 */
.warp {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 多行文本显示省略号 */
.warp2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
}

/* 汉字加数字出现了换行 */
.warp-break {
    word-break: break-all;
}

/* 动画旋转效果 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.tox-loading {
    width: 50px; /* 根据需要调整 */
    height: 50px; /* 根据需要调整 */
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 2s linear infinite;
    display: inline-block;
}

/* 定位居中显示 --------------------------------------------------------------------------------------------------------*/
/* 当父级元素的宽高为100%并且子级元素使用了position: absolute时，要实现子级元素在父级中上下左右居中显示 */
/* 方法一：使用transform属性
    这种方法利用了CSS的transform属性来移动元素，使其居中。
    css */
.parent {
    position: relative; /* 或 absolute/fixed，取决于你的布局 */
    width: 100%;
    height: 100%;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 相对于自身宽度和高度的50%进行移动 */
    /* 其他样式 */
}
/* 方法二：使用CSS
    Grid
    CSS
    Grid
    布局是一种现代且强大的布局方法，可以轻松实现元素的居中。
    css */
.parent {
    display: grid;
    place-items: center; /* 简写属性，等同于 justify-items: center; align-items: center; */
    width: 100%;
    height: 100%;
}

.child {
    /* 无需指定position或transform */
    /* 其他样式 */
}
/* 方法三：使用Flexbox
虽然Flexbox通常用于一行或一列的布局，但也可以用来实现居中。不过，由于Flexbox是针对主轴和交叉轴来定义的，因此实现绝对定位元素的居中可能不是最直接的方法。但是，如果你希望父元素本身就是Flex容器，并且子元素需要绝对定位，你可以在子元素上使用Flexbox的align-self和margin属性。 */

.parent {
    display: flex;
    justify-content: center; /* 主轴上的居中 */
    align-items: center; /* 交叉轴上的居中，但这对绝对定位元素无效 */
    width: 100%;
    height: 100%;
    position: relative; /* 或 absolute/fixed，取决于你的布局 */
}

.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; /* 这将使元素在四个方向上均匀分布，但仅当元素有确定的宽度和高度时有效 */
    /* 其他样式 */
}
/* 定位居中结束------------------------------------------------------------------------------------ */

/* css中after 和before的使用 ---------------------------------------*/
.li &:after {
    content: "";
    width: 350px;
}
/* css中after 和before的使用 结束---------------------------------------*/

/* flex弹性布局最后一行不对齐的处理        不齐全，还有问题*/
/* 1、 */
.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.container::after {
    content: "";
    /* flex: auto; 这样设置紧贴左侧，不好控制边距*/
    width: 350px; /*这样设置，如果上面的行显示4个，最后一行出现3个，就会出现错行，因为，你写了一个宽度，而现在有三个，宽度对不上，适合一行控制在3个*/
}
.child {
    width: 350px;
    height: 120px;
    background-color: red;
}
/* 2、使用网格布局（grid布局） */
.container {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-gap: 10px;
}
.container .list {
    width: 100px;
    height: 100px;
    background-color: #2a80eb;
    margin-top: 5px;
}
/*3、换行后右侧有边距，不太合适 不使用 justify-content :space-between 声明在模拟两端对齐效果。中间的gap间隙我们使用margin进行控制。 */
.container {
    width: 100%;
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
    flex-wrap: wrap;
}

.list {
    width: 350px;
    height: 120px;
    background-color: skyblue;
    margin-top: 15px;
}

/* 如果最后一行是3个元素 */
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(350px + 12px);
}

/* 如果最后一行是2个元素 */
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(350px + 12px + 350px + 12px);
}
/* flex弹性布局最后一行不对齐的处理 结束-------------------------- */
